<template>
<div class="content">
	<!-- 条件筛选 -->
	<div class="filter">
		<div class="three" @click="toggleFilter(1)">{{timeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!dateChoose,'icon-ssj':dateChoose}"></i></div>
		<div class="three" @click="toggleFilter(2)">{{typeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!typeChoose,'icon-ssj':typeChoose}"></i></div>
		<div class="three" @click="toggleFilter(3)">{{payTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!payChoose,'icon-ssj':payChoose}"></i></div>
		<div class="clb"></div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="dateChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">付款时间</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':timeType == 0 && !defineTime}" @click.stop.prevent="changeTime(0,'当天')">当天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 6 && !defineTime}" @click.stop.prevent="changeTime(6,'7天')">7天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 29 && !defineTime}" @click.stop.prevent="changeTime(29,'1个月')">1个月</div>
				<div class="time-cell mr" :class="{'cell-selected':timeType == 89 && !defineTime}" @click.stop.prevent="changeTime(89,'3个月')">3个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 179 && !defineTime}" @click.stop.prevent="changeTime(179,'6个月')">6个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 364 && !defineTime}" @click.stop.prevent="changeTime(364,'1年')">1年</div>
				<div class="time-cell custome-cell" :class="{'cell-selected':defineTime}" @click.stop.prevent="changeTime(666,'自定义时间')">自定义时间</div>
			</div>
			<div v-if="defineTime">
				<div class="half-title" style="padding-left:.4rem;">开始时间</div>
				<div class="half-title" style="padding-left:.21rem;">结束时间</div>
				<div class="time-grid">
					<div class="time-cell custome-cell">
						<datetime v-model="start_date"></datetime>
					</div>
					<div class="time-cell custome-cell">
						<datetime v-model="end_date"></datetime>
					</div>
				</div>
				<div class="certain" @click.stop.prevent="makeSureTime()">确&nbsp;定</div>
			</div>
		</div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="typeChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">类型</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':operate.id == operateId}" v-for="operate in operator_type" @click="chooseOperate(operate.id,operate.name)">{{operate.name}}</div>
			</div>
		</div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="payChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">付款方式<span class="vux-close"></span></div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':pay.id == payId}" v-for="pay in pay_mode" @click="choosePay(pay.id,pay.name)">{{pay.name}}</div>
			</div>
		</div>
	</div>
	<!-- 条件筛选END -->
	<!-- 财务概览 -->
	<div class="financial-overview">
		<div class="common-title">财务概览<span class="unit">（元）</span></div>
		<div class="collection">
			<div class="cell green">
				<div class="num">
					<countup :start-val="0" :end-val="total_receivable_amt" :decimals="2" :duration="2"></countup>
				</div>
				<div class="desc">实收金额</div>
			</div>
			<div class="cell blue">
				<div class="num">
					<countup :start-val="0" :end-val="total_refund_amt" :decimals="2" :duration="2"></countup>
				</div>
				<div class="desc">退费</div>
			</div>
			<div class="cell orange">
				<div class="num">
					<countup :start-val="0" :end-val="discount" :decimals="2" :duration="2"></countup>
				</div>
				<div class="desc">优惠</div>
			</div>
		</div>
	</div>
	<!-- 财务概览END -->
	<!-- 小计 -->
	<div class="subtotal">
		<div class="common-title">小计<span class="unit">（元）</span></div>
		<div class="grid">
			<table style="width: 100%;">
				<tr>
					<td class="first rb bb">
						<div class="num">{{cash_pay_amt}}</div>
						<div class="desc">现金</div>
					</td>
					<td class="first rb bb">
						<div class="num">{{alipay_pay_amt}}</div>
						<div class="desc">支付宝</div>
					</td>
					<td class="first bb">
						<div class="num">{{wx_pay_amt}}</div>
						<div class="desc">微信</div>
					</td>
				</tr>
				<tr>
					<td class="second rb bb">
						<div class="num">{{bank_card_pay_amt}}</div>
						<div class="desc">银行卡</div>
					</td>
					<td class="second rb bb">
						<div class="num">{{medical_insurance_pay_amt}}</div>
						<div class="desc">医保</div>
					</td>
					<td class="second bb">
						<div class="num">{{commercial_insurance_pay_amt}}</div>
						<div class="desc">商保</div>
					</td>
				</tr>
				<tr>
					<td class="third rb">
						<div class="num">{{other_pay_amt}}</div>
						<div class="desc">其他</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- 小计END -->
	<!-- 收费记录 -->
	<div class="charge-record">
		<div class="common-title">收费记录</div>
		<div class="table" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<div class="cell" v-for="item in list" v-if="pay_mode.length > 0 && operator_type.length > 0">
				<div class="detail">
					<div class="item">{{item.operate_type | operateDic}}&nbsp;&nbsp;<span class="desc">{{item.pay_mode | payDic}}</span></div>
					<div class="date">{{item.charge_date}}</div>
				</div>
				<div class="sum" :class="{earn:item.is_profit==1,pay:item.is_profit==0}">
					<span v-if="item.is_profit==1">+</span>
					<span v-else>-</span>
					{{item.pay_amt}}
				</div>
			</div>
		</div>
	</div>
	<!-- 收费记录END -->
</div>
</template>

<script>
import { Datetime,Countup } from 'vux'
import APIURL from "@/apiurl"
import Vue from 'vue'
export default {
	components:{
		Datetime,Countup
	},
	data() {
		return {
			busy:false,
			timeTitle:"当天",
			timeType:0,
			tempTimeType:0,
			defineTime:false,// 选择自定义时间
			sureDefine:false,// 确定自定义时间
			typeTitle:"全部类型",
			payTitle:"付款方式",
			dateChoose:false,
			typeChoose:false,
			payChoose:false,
			start_date: new Date().Format("yyyy-MM-dd"),
			end_date: new Date().Format("yyyy-MM-dd"),
			total_receivable_amt:0,// 实收金额
			total_refund_amt:0,// 退费
			discount:0,// 优惠
			alipay_pay_amt:0,// 支付宝
			bank_card_pay_amt:0,// 银行卡
			cash_pay_amt:0,// 现金
			commercial_insurance_pay_amt:0,// 商保
			medical_insurance_pay_amt:0,// 医保
			wx_pay_amt:0,// 微信支付
			other_pay_amt:0,// 其他支付
			operator_type:[],
			pay_mode:[],
			payId:0,
			operateId:0,
			page:0,// 页码
			entry_count:10,// 每页条目数
			list:[],
			intervalId:""
		}
	},
	methods: {
		loadMore() {
			if (this.busy) {
				return;
			}
			this.queryFinancialRecord();
		},
		resetPage() {
			this.page = 0;
			this.list = [];
			this.busy = false;
			this.queryFinancial();
			this.queryFinancialRecord();
		},
		queryFinancial() {
			var self = this;
			var requestBody = {
				token: userToken,
				start_date:self.start_date,
				end_date:self.end_date,
				hospital_id:hospital_id
			}
			if (self.operateId != 0) {
				requestBody.operate_type = self.operateId;
			}
			if (self.payId != 0) {
				requestBody.pay_mode = self.payId;
			}
			self.post(APIURL.FINANCIAL, requestBody, function(data){
				self.total_receivable_amt = data.total_receivable_amt;
				self.total_refund_amt = data.total_refund_amt;
				self.discount = data.discount;
				self.alipay_pay_amt = data.alipay_pay_amt
				self.bank_card_pay_amt = data.bank_card_pay_amt
				self.cash_pay_amt = data.cash_pay_amt
				self.commercial_insurance_pay_amt = data.commercial_insurance_pay_amt
				self.medical_insurance_pay_amt = data.medical_insurance_pay_amt
				self.wx_pay_amt = data.wx_pay_amt
				self.other_pay_amt = data.other_pay_amt
			});
		},
		queryFinancialRecord() {
			var self = this;
			if (self.busy) {
				return;
			}
			var requestBody = {
				token: userToken,
				start_date:self.start_date,
				end_date:self.end_date,
				page:self.page,
				entry_count:self.entry_count,
				hospital_id:hospital_id
			};
			if (self.operateId != 0) {
				requestBody.operate_type = self.operateId;
			}
			if (self.payId != 0) {
				requestBody.pay_mode = self.payId;
			}
			self.busy = true;
			self.post(APIURL.FINANCIAL_RECORD, requestBody, function(data){
				if (self.page == 0) {
					self.list = data.list;
				} else {
					self.list = self.list.concat(data.list);
				}
				if (data.list.length == self.entry_count) {
					// 判断是否需要继续加载
					self.page += 1;
					self.busy = false;
				} else {
					self.busy = true;
				}
				
			});
		},
		makeSureTime() {
			this.toggleFilter(1);
			this.sureDefine = true;
			this.timeTitle = "自定义时间";
			this.resetPage();
		},
		changeTime(timeType, timeTitle) {
			if (timeType != 666) {
				var nowDate = new Date();
				this.start_date = new Date(nowDate - timeType * 24*3600*1000).Format("yyyy-MM-dd");
				this.timeType = timeType;
				this.timeTitle = timeTitle;
				this.toggleFilter(1);
				this.defineTime = false;
				this.sureDefine = false;
				this.resetPage();
			} else {
				this.defineTime = true;
			}
		},
		chooseOperate(operateId,operateName) {
			if ( operateId == 0 ) {
				this.typeTitle = "全部类型"
			} else {
				this.typeTitle = operateName;
			}
			this.operateId = operateId;
			this.toggleFilter(2);
			this.resetPage();
		},
		choosePay(payId,payName) {
			this.payId = payId;
			if ( payId == 0 ) {
				this.payTitle = "付款方式";
				this.payId = 0;
			} else {
				this.payTitle = payName;
			}
			this.toggleFilter(3);
			this.resetPage();
		},
		toggleFilter(type) {
			switch(type) {
				case 1:
					this.typeChoose = false;
					this.payChoose = false;
					this.dateChoose = !this.dateChoose;
					if (this.dateChoose) {
						if (!this.sureDefine) {
							this.defineTime = false;
						}
					}
					break;
				case 2:
					this.dateChoose = false;
					this.payChoose = false;
					this.typeChoose = !this.typeChoose;
					break;
				case 3:
					this.dateChoose = false;
					this.typeChoose = false;
					this.payChoose = !this.payChoose;
					break;
			}
		},
		hideFilter() {
			if (!this.sureDefine) {
				this.defineTime = false;
			}
			this.dateChoose = false;
			this.typeChoose = false;
			this.payChoose = false;
		},
		query() {
			var self = this;
			var requestBody = {
				token : userToken,
			}
			self.post(APIURL.CATEGORY, requestBody, function(data){
				self.operator_type = data.statistics.financial.operator_type;
				self.pay_mode = data.statistics.financial.pay_mode;
				// 类型字典
				Vue.filter('operateDic',function(id){
					for (var i=0;i<self.operator_type.length;i++) {
						var operate = self.operator_type[i];
						if (id == operate.id ) {
							return operate.name;
						}
					}
					return "";
				});
				// 支付字典
				Vue.filter('payDic',function(id){
					var result = "";
					if (id.indexOf(',') >= 0) {
						var payArr = id.split(",");
						for (var i=0;i<payArr.length;i++) {
							var childId = payArr[i];
							for (var j=0;j<self.pay_mode.length;j++) {
								var pay = self.pay_mode[j];
								if (childId == pay.id ) {
									result += i==0?pay.name:","+pay.name;
									break;
								}
							}
						}
					} else {
						for (var i=0;i<self.pay_mode.length;i++) {
							var pay = self.pay_mode[i];
							if (id == pay.id ) {
								return pay.name;
							}
						}
					}
					return result;
				});
				
				self.queryFinancialRecord();
			})
			self.queryFinancial();
		}
	},
	mounted() {
		initTokenNative();
		setTitleNative("财务查询");
		var self = this;
		// 定时器判断原生有无赋值诊所信息给H5
		this.intervalId = window.setInterval(function(){
			if (userToken != undefined && hospital_id != undefined) {
				self.query();
				if (self.intervalId != "") {
					window.clearInterval(self.intervalId);
				}
			}
		},100);
		
	}
}
</script>

<style>

</style>